<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大屏</title>
    <style>
    *{margin:0;padding:0;}
    
      
    body {  
    width: 98%;  
  
    font-family: '宋体', 'Lucida sans', Arial;  
    font-size: 20px;  
  
    background-image:url('bg.png');   
		background-repeat:no-repeat;          
		background-size:100% auto;    
		color:#3b5fcc      ;
  }
  
  table {  
    *border-collapse: collapse; /* IE7 and lower */  
    border-spacing: 0;  
    width: 100%;  
      margin-top: 5px ;  
    }  
      
    th{ color:#2478aa; }
    td{ color:#ccdce6; }
    .bordered {  
    border: solid #436eee 1px;  
    -moz-border-radius: 6px;  
    -webkit-border-radius: 6px;  
    border-radius: 6px;  
    -webkit-box-shadow: 0 1px 1px #436eee;  
    -moz-box-shadow: 0 1px 1px #436eee;  
    box-shadow: 0 1px 1px #436eee;  
    }  
      
    .bordered tr:hover {  
    background: #555;  
    -o-transition: all 0.1s ease-in-out;  
    -webkit-transition: all 0.1s ease-in-out;  
    -moz-transition: all 0.1s ease-in-out;  
    -ms-transition: all 0.1s ease-in-out;  
    transition: all 0.1s ease-in-out;  
    }  
      
    .bordered td, .bordered th { 
    	/* 
    border-left: 1px solid #ccc;  
    border-top: 1px solid #ccc;  
    */
    padding: 10px;  
    text-align: left;  
    }  
      
   
    .bordered td:first-child, .bordered th:first-child {  
    border-left: none;  
    }  
      
    .bordered th:first-child {  
    -moz-border-radius: 6px 0 0 0;  
    -webkit-border-radius: 6px 0 0 0;  
    border-radius: 6px 0 0 0;  
    }  
      
    .bordered th:last-child {  
    -moz-border-radius: 0 6px 0 0;  
    -webkit-border-radius: 0 6px 0 0;  
    border-radius: 0 6px 0 0;  
    }  
      
    .bordered th:only-child{  
    -moz-border-radius: 6px 6px 0 0;  
    -webkit-border-radius: 6px 6px 0 0;  
    border-radius: 6px 6px 0 0;  
    }  
      
    .bordered tr:last-child td:first-child {  
    -moz-border-radius: 0 0 0 6px;  
    -webkit-border-radius: 0 0 0 6px;  
    border-radius: 0 0 0 6px;  
    }  
      
    .bordered tr:last-child td:last-child {  
    -moz-border-radius: 0 0 6px 0;  
    -webkit-border-radius: 0 0 6px 0;  
    border-radius: 0 0 6px 0;  
    }  
   #divCenter {  
    background-image:url('center.png');   
		background-repeat:no-repeat;          
		background-size:100% 100%;    
		color:#3b5fcc      ;
  }  
    
  </style>
</head>

<body>
    <canvas id="canvas" ></canvas>
    <div class="bordered" style="width:150px;heigth:300xp;position: absolute;top:10px;left:10px">
   <table>
   	<tr>
   		
   		<th>任务类型</th>
   		 	</tr>
   	<tr>
   		<td>入库</td>
   	</tr>
   	<tr>
   		
   		<th>起始位置</th>
   		 	</tr>
   	<tr>
   		<td>10001</td>
   	</tr>
   	<tr>
   	<tr>
   		
   		<th>当前状态</th> 	</tr>
   	<tr>
   		<td>取货行走</td>
   	</tr>
   	<tr>
   		
   		<th>资产编码</th> 	</tr>
   	<tr>
   		<td>zcbm10001</td>
   	</tr>
   	<tr>
   		
   		<th>资产编码</th> 	</tr>
   	<tr>
   		<td>zcbm10002</td>
   	</tr>
   	<tr>
   		
   		<th>资产编码</th> 	</tr>
   	<tr>
   		<td>zcbm10003</td>
   	</tr>
   	<tr>
   		
   		<th>资产编码</th> 	</tr>
   	<tr>
   		<td>zcbm10004</td>
   	</tr>
   </table>
    	
    	
    </div>
    
    <div class="bordered" style="width:150px;heigth:300xp;position: absolute;top:10px;right:10px">
   <table>
   	<tr>
   		
   		<th>任务类型</th> 	</tr>
   	<tr>
   		<td>出库</td>
   	</tr>
   	<tr>
   		
   		<th>目标位置</th> 	</tr>
   	<tr>
   		<td>10001</td>
   	</tr>
   		<tr>
   		
   		<th>当前状态</th> 	</tr>
   	<tr>
   		<td>放货行走</td>
   	</tr>
   	<tr>
   	<tr>
   		
   		<th>资产编码</th> 	</tr>
   	<tr>
   		<td>zcbm10001</td>
   	</tr>
   	<tr>
   		
   		<th>资产编码</th> 	</tr>
   	<tr>
   		<td>zcbm10002</td>
   	</tr>
   	<tr>
   		
   		<th>资产编码</th> 	</tr>
   	<tr>
   		<td>zcbm10003</td>
   	</tr>
   	<tr>
   		
   		<th>资产编码</th> 	</tr>
   	<tr>
   		<td>zcbm10004</td>
   	</tr>
   </table>
    	
    	
    </div>
</body>

<script src='base.js' lang="utf-8"></script>
<script src='Fullscreen.js' lang="utf-8"></script>
<script src='component.js' lang="utf-8"></script>

</html>

<script>
	   resList=[];
var cranePic = new Image();  
    cranePic.src = "png/crane.png";  
    var backPic = new Image();  
    backPic.src = "png/back.png";  
    var productPic = new Image();  
    productPic.src = "png/product.png";  
    
    var carrierBackPic = new Image();  
    carrierBackPic.src = "png/carrierBack.png";  
    screenHeight= window.screen.height 
    screenWidth =window.screen.width
    craneBegin=202;//输送线开始水平位置
    craneEnd=screenWidth-200
    cols=50
    stockSize=(craneEnd-craneBegin)/(cols-1)//货位边长

    staticGraph = [];//静态图像
    craneList=[];  






var testTime=0
var info="asdf";


var xmlHttpReg = null;

    if (window.ActiveXObject) {//如果是IE
        xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");
     } else if (window.XMLHttpRequest) {
        xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
     }
function myReflash(url,fun,err){

		this.url="http://127.0.0.1:12138"+url;
		var doResult = function () {
        if (xmlHttpReg.readyState == 4 && xmlHttpReg.status == 200) {//4代表执行完成
	        var res= JSON.parse(xmlHttpReg.responseText)
	        try{
	        	fun(res)
	        	}catch(e){}
		        if(err){
				    		var data=[];
				    		
				    		data.push(Math.random())
				    		data.push(Math.random())
				    	  
				    		err(data)
			    	}
	        setTimeout(ajax, 1000);
        }
		    if(xmlHttpReg.readyState == 4 &&(xmlHttpReg.status == 0||xmlHttpReg.status == 404) ){
		    	if(err){
			    		var data=[];
			    		
			    		data.push(Math.random())
			    		data.push(Math.random())
			    	 
			    		err(data)
		    	}
		 			setTimeout(ajax, 1000);
		    }
    }
		var ajax= function(){
			 xmlHttpReg.open("get", this.url, true);
				try{

					xmlHttpReg.send();
					xmlHttpReg.onreadystatechange = doResult; //设置回调函数
				}catch(e){
						if(err){
								err((Math.random()+0.5)*50000)
						}
							setTimeout(ajax, 1000);
				}
	        }

			ajax();
	}


   
      function showCrane(){
		    	 for(var i=0;i<craneList.length;i++){
				     	 var crane1=craneList[i]
				     	 var xmm=crane1.getAnchor().x;
				     	 var goal=crane1.xGoal;
				     	 
				     	 if(goal>xmm){//目标在右边
				     	 	  crane1.xa=Math.abs(crane1.xa)
					     	 	if(crane1.xv<0){//向左跑
					     	 		crane1.xv+=crane1.xa/10;
					     	 	}
				     	 	
				     	 	}else if(goal<xmm){//目标在左边
				     	 		 crane1.xa=-Math.abs(crane1.xa)
					     	 	if(crane1.xv>0){//向右跑
					     	 		crane1.xv+=crane1.xa/10;
					     	 	}
				     	 	}
				     	 
				     	 var x=	crane1.xv/60.0
				     	 if(Math.abs(goal-xmm)<2){
				     	 	   crane1.setAnchor({x:crane1.xGoal,y:crane1.y})
				     	 }else{
				     	 		 crane1.move(x,0)
				     	 }
		     			 crane1.draw();
		     			 
		     }
		       product1.setAnchor(crane1.getAnchor());
		       product1.draw();
		    }
		    
		   
  	
		  	   
		
		 
		    
		    	    		
	
	
	
window.onload = function(){
   
	var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    canvas.height= screenHeight-20
    canvas.width= screenWidth
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle="#0ff";
    context.fillRect(0,0,canvas.width,canvas.height);
    context.translate(0.5,0.5);

	 storeRoom = new  StoreRoom(context,{shelfs:4,cols:38,rows:5,x1:200,y1:310,x2:canvas.width-200,y2:canvas.height-20});
	 canvas.onmousemove = function (e) {
						var location = getLocation(e.clientX, e.clientY);
						selectId =storeRoom.getId(location.x,location.y);
		};
		 for(var i=1;i<3;i++){
				   var y=100*i-10;
				   craneList.push(new Crane(context,(craneBegin+craneEnd)/2,y,stockSize));
       	   staticGraph.push(new Line({context:context,x1:craneBegin,y1:y,x2:craneEnd,y2:y,width:3,strokeStyle :"rgba(255,255,255,1)"}));
       	   staticGraph.push(new Line({context:context,x1:craneBegin-50,y1:y,x2:craneBegin,y2:y,width:3,strokeStyle :"rgba(255,255,255,0.2)"}));
       	   staticGraph.push(new Line({context:context,x1:craneEnd,y1:y,x2:craneEnd+50,y2:y,width:3,strokeStyle :"rgba(255,255,255,0.2)"}));
      }

	  product1=new Product(context,1000,170,stockSize);


    //动画循环,绘画执行操作
      (function drawFrame(t){
          window.requestAnimationFrame(drawFrame); 
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.fillStyle="#0ff";
          context.fillRect(0,0,canvas.width,canvas.height);
          context.drawImage(backPic,0,0,canvas.width, canvas.height)
		      //货位格子
      	 	for(var i=0;i<staticGraph.length;i++){
        		staticGraph[i].draw();
        	}
		      //堆垛机
				  showCrane();
					storeRoom.draw();
	  			showTuli(context)
	    		if(resList&&resList.length>0){
	        	for(var i=0;i<resList.length;i++){
	        		var d = resList[i];
	        		addStockProduct(context,storeRoom,d.l,d.s)
	        	}
	        }
    
      }());
      
      



      myReflash("/Daping",function(val){
      	
	  },
	  function(val){
        	for(var i=0;i<2;i++){
        		crane1=craneList[i]
        			var goalmm=val[i]*(craneEnd-craneBegin)+craneBegin;//目标位置
        			crane1.xGoal=goalmm;
        			var crane1 = craneList[i]
		        	var xmm=crane1.getAnchor().x;//当前位置
		          var s=goalmm-xmm
		          var a=(s-crane1.xv)*2
		        	crane1.xa=a
		        	crane1.xv+=a/60.0;//当前速度
      		}
      })
	}



	  

function showTuli(context){
  	/*
  	   			var tulix=200;
          tuli(context,tulix,"入库中",'#aaaaff');
          tulix+=150
      		tuli(context,tulix,"库存",'#1111ff');
      		tulix+=150
      		tuli(context,tulix,"出库中",'#6666c4');
      		*/
  	}
  	  function addStockProduct(context,storeRoom,id,status){
    	    var widthType=2
     	  	var w=storeRoom.storeWidth/9
     	  	var color="#ffffff";
   	  		if(status==1){
   	  			color="#fa0";
   	  		} else if(status==2){
   	  			color="#1111ff";
   	  		}else if(status==3){
   	  			color="#f0f";
   	  		}
     	  	
     	  	var  key=parseInt(id)
     	    var  index=1
     	  	var stock = new StockProduct(context,color);
     	  	var store = storeRoom.stores['k'+key];
     	  	var anchor = store.getAnchor();
     	  	
     	  	var newAnchor={x:anchor.x,y:anchor.y}
     	  	
     	  	stock.setAnchor(newAnchor)
     	  	stock.draw();
     	  }
     	  
  
  function tuli(context,tuliy,info,color){
    	    tuliy/=2.5
    			var tulix=1010;
    			var tuli = new   Rectangle(context,tulix,tuliy,tulix+80,tuliy+20,0.5,color);
      		tuli.draw();  
      		context.fillStyle='#000000'
      		context.fillText(info,tulix,tuliy+35);
    	
    	}
    	
    	
           
  
     	   
        function getLocation(x, y) {
					var bbox = canvas.getBoundingClientRect();
					return {
						x: (x - bbox.left) * (canvas.width / bbox.width),
						y: (y - bbox.top) * (canvas.height / bbox.height)
						
						/*
						 * 此处不用下面两行是为了防止使用CSS和JS改变了canvas的高宽之后是表面积拉大而实际
						 * 显示像素不变而造成的坐标获取不准的情况
						x: (x - bbox.left),
						y: (y - bbox.top)
						*/
					};
				}

</script>
